<template>
  <div class="homepage">
    <div class="banner">
      <swiper :list="bannerList" v-model="bannerIndex" :show-desc-mask="false"></swiper>
    </div>
    <tab :line-width=2 active-color='#038968' bar-active-color="#038968" v-model="tabIndex" :scroll-threshold="4" :animate="false">
      <tab-item :selected="tabIndex === index" v-for="(item, index) in tabList" @click.native="getAllGoods(item.cate_id, index)" :key="index">{{item.cate_name}}</tab-item>
    </tab>
    <div class="list-wrap">
      <div class="goods-item" v-for="(item, index2) in goodsList[tabIndex]" :key="index2" @click="gotoDetail(item.goodsId)" :class="{none: item.goodsName == ''}">
        <div class="goods-cover">
          <img :src="item.goodsCover" alt="">
        </div>
        <div class="goods-desc">
          <div class="name">{{item.goodsName}}</div>
          <div class="desc-footer">
            <span class="price">￥{{item.goodsPrice}}</span>
            <span class="volume">已售{{item.goodsVolume}}</span>
          </div>
        </div>
      </div>
      <load :loadEvent="getAllGoodsW(tabList[tabIndex].cate_id,tabIndex)" v-if="tabList.length>0"></load>
    </div>
    <div class="back-top" @click="backTop()"></div>
  </div>
</template>

<script>
  import { Tab, TabItem, Swiper, SwiperItem } from 'vux'
  import axios from 'axios';
  import load from "COMPS/load.vue"

  export default {
    name: 'homepage',
    components: {
      Tab,
      TabItem,
      Swiper,
      SwiperItem,
      load
    },
    data: function() {
      return {
        goodsList: [],
        bannerList: [],
        tabList: [],
        tabIndex: 0,
        bannerIndex: 0,
      }
    },
    mounted() {
      let that = this;
      this.getTabList();
      this.getBannerList();
    },
    computed: {
      scrollTop() {
        return document.documentElement.scrollTop
      }
    },
    watch: {
    },
    methods: {
      backTop() {
        window.scrollTo(0,0);  
      },
      // 包一层为了防止传递的是返回值而不是函数本身
      getAllGoodsW(type,index){
        return () => this.getAllGoods(type,index)
      },
      getTabList: function() {
        let that = this;
        if(window.DEBUGGING) {
          return new Promise(function(resolve) {
            resolve([{
              "cate_name": "电动执行机构",
              "cate_id": 0, 
              "cate_order": 27
            },{
              "cate_name": "BIOEA雷达物位计",
              "cate_id": 0, 
              "cate_order": 27
            },{
              "cate_name": "BIOEA超声波物位计",
              "cate_id": 0, 
              "cate_order": 27
            },{
              "cate_name": "商品",
              "cate_id": 0, 
              "cate_order": 27
            },{
              "cate_name": "商品类型",
              "cate_id": 0, 
              "cate_order": 27
            },{
              "cate_name": "商品类型",
              "cate_id": 0, 
              "cate_order": 27
            },{
              "cate_name": "商品类型",
              "cate_id": 0, 
              "cate_order": 27
            }])
          }).then((data) => {
            that.tabList = data;
            that.getAllGoods(that.tabList[0].cate_id, 0);
          })
        }
        axios.get('/Index/goodsCateList').then((res) => {
          that.tabList = res;
          that.getAllGoods(that.tabList[0].cate_id, 0);
        })
      },
      getAllGoods: function(type,index) {
        let that = this;
        this.tabIndex = index;
        if(that.goodsList[index]) {
          return Promise.resolve();
        }
        if (window.DEBUGGING) {
          return new Promise(function(resolve, reject) {  
            setTimeout(() => {
              resolve([{
                goodsId: '1',
                goodsName: '精密仪器隔振紧密仪器紧密仪器紧密仪器紧密仪器',
                goodsPrice: '1500',
                goodsCover: 'http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg',
                goodsVolume: '1358'
              },{
                goodsId: '2',
                goodsName: '蓄电池',
                goodsPrice: '1500',
                goodsCover: 'http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg',
                goodsVolume: '1358'
              },{
                goodsId: '3',
                goodsName: '其他',
                goodsPrice: '1500',
                goodsCover: 'http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg',
                goodsVolume: '1358'
              },{
                goodsId: '4',
                goodsName: '精密仪器隔振',
                goodsPrice: '1500',
                goodsCover: 'http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg',
                goodsVolume: '1358'
              },{
                goodsId: '5',
                goodsName: '精密仪器隔振',
                goodsPrice: '1500',
                goodsCover: 'http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg',
                goodsVolume: '1358'
              },{
                goodsId: '6',
                goodsName: '蓄电池',
                goodsPrice: '1500',
                goodsCover: 'http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg',
                goodsVolume: '1358'
              }])
            }, 1000)
          }).then(function(data){
            console.log(index+'发送请求')
            that.goodsList[index] = data;
            that.goodsList[index].push({
              goodsId: '',
              goodsName: '',
              goodsPrice: '',
              goodsCover: '',
              goodsVolume: ''
            })
            that.$set(that.goodsList, index, that.goodsList[index]);
          })
        }
        // 获取商品列表
        /** 预设获取列表的参数
        * @param {String} type - 列表类型
        * @param {Number} index - 插入数组的下标
        */
        // todo:新加的-开始-待测
        let _page;
        let _List = that.goodsList[index]
        if (_List == undefined) {
          _page = 1
        } else {
          _page = _List[_List.length-2].page + 1;
        }
        // 新加的-结束
        return axios.get('/Index/goodsList',{
          params: {
            goods_cate: type,
            page: _page
          }
        }).then((data) => {
          let resData = data.map(function(e, index) {
            return {
              goodsId: e.goods_id,
              goodsName: e.goods_name,
              goodsPrice: e.price,
              goodsCover: e.goods_img,
              goodsVolume: e.goods_sell_num,
              page: _page
            }
          })
          // 数组更新后用$set触发dom更新
          if(that.goodsList[index] == undefined) {
            that.$set(that.goodsList, index, resData);
            that.goodsList[index].push({
              goodsId: '',
              goodsName: '',
              goodsPrice: '',
              goodsCover: '',
              goodsVolume: ''
            })
            return
          }

          // that.goodsList[index] = that.goodsList[index].concat(resData);
          
          let dataA = that.goodsList[index].concat(resData);
          that.$set(that.goodsList, index, dataA);
        })
      },
      getBannerList() {
        let that = this;
        if (window.DEBUGGING) {
          return new Promise(function(resolve, reject) {
            resolve([
              'http://placeholder.qiniudn.com/800x300/FF3B3B/ffffff',
              'http://placeholder.qiniudn.com/800x300/FFEF7D/ffffff',
              'http://placeholder.qiniudn.com/800x300/8AEEB1/ffffff'
            ])
          }).then(function(data){
            that.bannerList = data.map((e, index) => {
              return {
                img: e
              }
            });
          })
        }
        axios({
          method: 'GET',
          baseURL: '',
          url:'/Index/bannerList'
        }).then((res) => {
          that.bannerList = res.map((e, index) => {
            return {
              img: e.banner_img
            }
          })
        })
      },
      gotoDetail(id) {
        location.href = "/goodsInfo.html?id=" + id
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';

  .homepage {
    .back-top {
      .Round(25px);
      position: fixed;
      bottom: 67px;
      right: 10px;
      opacity: 0.6;
      background-image: url('~IMGS/top.png');
      background-size: cover;
    }
    .banner {
      width: 100%;
      height: 180px;
    }
    .weui-tabbar {
      position: fixed;
    }
    .list-wrap {
      // display: flex;
      // justify-content:space-between
      // flex-wrap: wrap;
      text-align: center;
      margin: 0 auto;
      padding: 0px 0px 50px 0;
      .On-lg({
        text-align: left;
        padding: 5px 5px 50px 10px;
      });
      .goods-item {
        display: inline-block;
        width: 46%;
        margin: 1%;
        background-color: #fff;
        border-radius: 5px;
        // &:nth-last-of-type(1) {
        //   visibility:hidden;
        // }
        &.none {
          visibility:hidden;
          max-height: 1px;
          >div {
            display: none;
          }
        }
        .On-lg({
          width: 172px;
          margin: 5px;
        });
        .goods-cover {
          >img {
            width: 100%;
            height: 145px;
          }
        }
        .goods-desc {
          height: 75px;
          padding: 0 12px;
          text-align: left;
          .name {
            padding-top: 15px;
            margin-bottom: 6px;
            font-size: 16px;
            color: #333;
            .Mult-line(1);
          }
          .desc-footer{     
            .price {
              color: #ff3939;
              font-size: 14px;
            }
            .volume {
              float: right;
              color: #999;
              font-size: 11px;
            }
          }
        }
      }
    }
  }
</style>